<template>
    <form-field :dirty="dirty" @valid="onValid">
        <form-color :inputValidate="false" :value="value" :disabled="disabled" :placeholder="placeholder" :precolors="precolors" :preshow="preshow" @change="onChange"/>
    </form-field>
</template>
<script lang="ts">
import { defineComponent, PropType, Ref, ref } from 'vue'
import FormField from './field.vue'
import FormColor from './color.vue'
export default defineComponent({
    components:{FormField,FormColor},
    props:{
        placeholder:{type:String,default:"hex,rgb,rgba,hsl,hsla"},
        disabled:{type:Boolean,default:false},
        value:{type:String,default:"#00000000"},
        preshow:{type:Boolean,default:true},
        precolors:{type:Array as PropType<Array<string>>}
    },
    setup(props,{emit}) {
        const dirty = ref(props.value)
        const onChange = (v:string)=>{
            dirty.value = v
        }
        const onValid = (e:{valid:boolean,tip:string,v:unknown})=>{
            if(e.valid)
            emit("ph-change",e.v)
        }
        return {
            onValid,
            onChange,
            dirty
        }
    },
})
</script>
